说起来，在不知不觉中，我竟然凑成了这沉浸式状态栏三部曲。
其实最开始的时候，我主要是因为工作上的原因想要在Android版的Edge浏览器上实现首页图片沉浸式的功能。确实，这是一个做沉浸式功能时比较容易被忽略的问题。如果背景图片的颜色和状态栏图标的颜色非常接近的话，那么的确会造成状态栏图标看不清楚的情况。这里我举了一些沉浸式效果做得不太好的案例，具体是什么App我就不提了。可以看到，这些App虽然实现了沉浸式状态栏的效果，但是由于状态栏上的图标变得难以看清，所以最终效果可能反而不好。但是，Edge浏览器是不会存在这种问题的。为什么呢？这就是我在上篇文章中说的，在实现沉浸式状态栏时运用了一些小黑科技。那么借助这些小黑科技，我终于可以凑成这沉浸式状态栏三部曲了。其实想要解决上图中的这种由于颜色值接近，导致部分内容看不清的情况，我能想到两种解决方案。一种是从设计层面解决，一种是从技术层面解决。从设计层面解决相对会比较容易一些，同时应该也是大部分App会采用的方案，那就是在背景图的上方再盖一层阴影。有了这层阴影之后，我们可以让状态栏上的图标始终都是浅色的。即使出现浅色的背景图，由于阴影层的存在，状态栏上的图标依然是可以看得清的。但如果只是用这个方案解决的话，那么我就不会写本篇文章了。因为这里我们会采用第二种方案，从技术层面解决。首先从技术层面进行分析，要解决这个问题，无非就是需要将背景图颜色和状态栏图标的颜色区分开。Android系统其实给了我们API来控制状态栏图标的颜色，但是只能设置成黑、白这两种颜色，而不可以将状态栏图标改成五颜六色的样子。默认情况下，系统会认为我们拥有的是一个深色的状态栏，那么状态栏上面的图标自然就应该白色的，因为只有这样才能看得清上面的图标。而调用如下API则可以让系统认为我们拥有的是一个浅色的状态栏：private fun setLightStatusBar() {
val flags = window.decorView.systemUiVisibility
window.decorView.systemUiVisibility = flags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
}
如此一来，状态栏上面的图标就会变成黑色的，以和浅色的状态栏相互映衬。如果要动态恢复成默认的深色状态栏，只需要这样设置：private fun setDarkStatusBar() {
val flags = window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
window.decorView.systemUiVisibility = flags xor View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
}
好了，现在有了这个法宝来控制状态栏图标的颜色，那么接下来的问题就是，什么时候应该显示白色的状态栏图标？什么时候应该显示黑色的状态栏图标？答案是显而易见的，为了能让前景背景的颜色区分更加明显，当然应该是底部是深色背景图的时候显示白色的状态栏图标，底部是浅色背景图的时候显示黑色的状态栏图标。因此，现在的问题就转移成了，我们如何才能识别一张背景图的指定区域是属于深色还是浅色？非常幸运，在Android系统上我们是可以做到这一点的，只需要借助Google提供的Palette库即可。Palette是一个专门用于对图像进行颜色提取和识别的库，功能虽然不能说是非常强大，但是已经完全可以满足我们这里的需求了。要使用Palette库，首先需要将它引入到项目当中，如下所示：dependencies {
implementation 'androidx.palette:palette:1.0.0'
}
接下来我们就可以借助Palette来进行一些颜色提取功能了，示例用法如下：Palette
.from(bitmap)
.setRegion(left, top, right, bottom)
.maximumColorCount(colorCount)
.generate {
}
首先，我们传入一个bitmap对象，这样Palette就会对它来进行图像解析。然后调用setRegion()方法来指定解析这个bitmap对象的哪个区域。比方说我们本篇文章是要解决状态栏图标的问题，那肯定就要去解析手机状态栏那个区域的颜色值，其他区域的颜色值对我们来说没有意义。接着调用maximumColorCount()方法来告诉Palette一共需要提取多少个颜色特征点。具体的颜色提取算法是由Palette自己控制的，我们无需关心。反正只需要知道，最终提取出来的这些颜色值都是这个bitmap的指定区域里最具代表性的就可以了。最后调用generate()方法开始解析，Palette会开启异步线程来执行解析操作，并将最终结果回调到Lambda表达式当中。现在我们已经得到这些提取出的特征点颜色值了，那么接下来，我们又该如何处理它们呢？需要说明的事，后续的处理逻辑其实并没有一个非常严格的规定。我只说一下我个人的处理方式，大家也完全可以去定义自己的处理逻辑。Palette
.from(bitmap)
.maximumColorCount(colorCount)
.setRegion(left, top, right, bottom)
.generate {
it?.let { palette ->
var mostPopularSwatch: Palette.Swatch? = null
for (swatch in palette.swatches) {
if (mostPopularSwatch == null
|| swatch.population > mostPopularSwatch.population) {
mostPopularSwatch = swatch
}
}
mostPopularSwatch?.let { swatch ->
val luminance = ColorUtils.calculateLuminance(swatch.rgb)
// 当luminance小于0.5时，我们认为这是一个深色值.
if (luminance < 0.5) {
setDarkStatusBar()
} else {
setLightStatusBar()
}
}
}
}
由于刚才在maximumColorCount()方法中传入了提取颜色特征点的数量，因此generate()方法的回调当中我们就可以得到多个颜色特征点（Swatch）。而每个颜色特征点都会有一个权重值，调用getPopulation()方法可以获取，表示该特征点在选定的bitmap区域的重要程度。我选取了权重值最高的那个特征点来作为这个bitmap区域的代表颜色值。接下来再调用ColorUtils.calculateLuminance()方法来计算选取的这个颜色值的亮度。当亮度低于0.5时，我就认为这是一个深色的颜色值，那么此时将状态栏设置成深色模式，状态栏图标就会自动变成白色。反之就将状态栏设置成浅色模式，此时状态栏图标就会自动变成黑色。大概流程就是这个样子，我觉得原理还是非常简单的，我甚至都没有给出一个完整的实例，只是贴出了一些代码片段。至于Palette，终归只是一个比较小众的库，知道或使用过的人可能并不多，所以用上这种小众技术我觉得足以称得上是黑科技了。这里我准备了几张不同的背景图，由Palette解析之后，会根据识别出的颜色值动态更改状态栏图标的颜色。可以看到，不管在什么背景图下，状态栏图标的颜色都可以做到自动适配，保证图标始终是清晰可见的。目前这种使用Palette来动态进行颜色识别的方案，我感觉至少是可以保证99%以上的场景都能够正确适配的，但是也存在一些特别极端的场景。比如说背景图就是一张黑白左右分割的图片，这种情况下Palette会选取哪种颜色来作为代表色其实是不确定的。但不管是选中了黑还是白，都一定会导致状态栏上有一半区域的图标是不可见的。效果如下图所示：不过对于这种极端情况，我觉得就没必要强求了。甚至我都并不认为这是一个Bug，反而觉得这是一种很酷的效果，你们觉得呢？好的，本篇文章就到这里。文中我只帖出了所有关键代码的示例，以及最终运行效果的截图。如果你不想自己动手去敲一遍，也可以直接参考我的完整源码：https://github.com/guolindev/ImmersiveStatusBar